<template>
  <div>
    <good-fqa-dialog v-model="dialogVisible" @change="freshTable" :data="dialogData" :goodId="goodId"/>
    <store-good-selector @change="goodInfoChange"/>
    <xum-title title="商品FQA">
      <el-button size="small" icon="el-icon-refresh" :loading="queryLoading"
                 @click="freshTable" :disabled="!haveGood">刷新</el-button>
      <el-button size="small" icon="el-icon-plus" type="primary" @click="handleAddFQA"
                 :disabled="!haveGood">添加FQA</el-button>
    </xum-title>
    <div>
      <xum-hint content="请选择商品" v-if="!haveGood && !queryLoading"/>
      <xum-hint content="刷新中..." v-if="queryLoading"/>
      <xum-hint v-if="haveGood && (!tableData || tableData.length <= 0) && init"
                content="该商品没有FQA信息，点击">
        <el-button @click="handleAddFQA" type="text" style="font-size: 16px; margin-left: 5px;"
                   :disabled="loading">添加</el-button>
      </xum-hint>
      <ul class="questionList">
        <li class="item" v-for="(item, index) in tableData" :key="index">
          <xum-question :id="item.id" :number="index < 9 ? '0' + (index + 1) : index + 1"
                        :answer="item['answer']" :question="item['question']"
                        @edit="handleItemEdit" @remove="handleItemRemove"/>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import StoreGoodSelector from '@pages/goods/part/StoreGoodSelector'
import XumQuestion from '@pages/goods/part/pageGoodFQA/XumQuestion'
import GoodFqaDialog from '@pages/goods/part/pageGoodFQA/GoodFqaDialog'
import { queryAllFqaByGoodId, removeQuestionByIds } from '@/api/ApiFrequentlyQuestion'
import { ResultCode } from '@/constants/constants'
import XumTitle from '@/components/XumTitle'
import XumHint from '@/components/XumHint'
export default {
  name: 'PageGoodFQA',
  components: { XumHint, XumTitle, GoodFqaDialog, XumQuestion, StoreGoodSelector },
  data () {
    return {
      dialogVisible: false,
      queryLoading: false,
      submitLoading: false,
      good: 0,
      tableData: [],
      dialogData: null,
      init: false
    }
  },
  computed: {
    haveGood () {
      return this.good && this.good.id && this.good.id > 0
    },
    goodId () {
      return this.haveGood ? this.good.id : 0
    },
    loading () {
      return this.queryLoading || this.submitLoading
    }
  },
  methods: {
    /**
     * 商品信息改变，刷新列表
     */
    goodInfoChange (val) {
      this.good = val
      this.freshTable()
    },
    /**
     * 刷新列表，获取商品FQA信息
     */
    freshTable () {
      if (this.haveGood) {
        this.queryLoading = true
        queryAllFqaByGoodId(this.good.id, (data) => {
          if (data && data.code === ResultCode.OK) {
            this.init = true
            data = data.object
            this.tableData = data
            this.$message.success('获取数据成功')
          }
        }, () => {
          this.queryLoading = false
        })
      }
    },
    /**
     * 添加
     */
    handleAddFQA () {
      this.dialogData = {}
      this.dialogVisible = true
    },
    /**
     * 編輯
     */
    handleItemEdit (val) {
      if (val) {
        this.dialogData = val
        this.dialogVisible = true
      }
    },
    /**
     * 刪除
     */
    handleItemRemove (val) {
      if (val && val.id && val.id > 0) {
        this.submitLoading = true
        removeQuestionByIds([val.id], data => {
          if (data && data.code === ResultCode.OK) {
            this.$message.success('移除FQA数据成功')
            this.freshTable()
          }
        }, () => {
          this.submitLoading = false
        })
      }
    }
  },
  mounted () {
    this.freshTable()
  }
}
</script>

<style scoped lang="scss">
  .title{
    margin-bottom: 16px;
  }

  .questionList{
    list-style: none;
    display: block;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: right;

    .item{
      display: block;
      padding: 0;
      margin: 20px 0;
      width: 100%;
    }

  }
</style>
